<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{background: #000; text-align: center; color:#fff; font-size:50px;}
	</style>
	<script>
	function toDou(n){
		return n<10?'0'+n:''+n;
	}
		window.onload=function(){
			var aImg=document.getElementsByTagName('img');
			function clock(){
				var oDate=new Date();
				var h=oDate.getHours();
				var m=oDate.getMinutes();
				var s=oDate.getSeconds();
				//alert(typeof h);弹出来的数字
				//alert(aImg.length);
				//操作一组图片，用for
				var str=toDou(h)+toDou(m)+toDou(s);
				//alert(str);
				for(var i=0;i<aImg.length;i++){
					aImg[i].src='img/'+str.charAt(i)+'.png'
				}
			}
			clock();
			setInterval(clock,1000);
		};
	</script>
</head>
<body>
	<img src="img/0.png" alt="">
	<img src="img/0.png" alt="">:
	<img src="img/0.png" alt="">
	<img src="img/0.png" alt="">:
	<img src="img/0.png" alt="">
	<img src="img/0.png" alt="">
</body>
</html>